<template>
    <div class="means-root">
        <BackHeader :searchShow="false">资 产</BackHeader>
        <div class="box">
            <span>账户余额</span>
            <span class="money"></span>
        </div>
        <div class="box">
            <span>申请提现</span>
            <span class="money"></span>
        </div>
        <div class="box">
            <span>押金</span>
            <span class="money"></span>
        </div>
        <div class="box">
            <span>充值</span>
            <span><img src="/img/arrow.png" alt=""></span>
        </div>
        <div class="box">
            <span>已购书籍</span>
            <span class="book"></span>
        </div>
        <div class="box">
            <span>捐赠书籍</span>
            <span class="book"></span>
        </div>
    </div>
</template>

<script>
import BackHeader from "../components/BackHeader.vue"
export default{
    components:{
        BackHeader
    }
}
</script>

<style scoped lang="less">
    .means-root{
        height: 100vh;
    }
    .box{
        width: 92.3vw;
        height: 16.3vw;
        border-bottom: 1px solid #e3e3e3;
        margin: 0 3.9vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span:nth-of-type(1){
            font-size: 4.3vw;
            color: #999999;
        }
        span:nth-of-type(2){
            font-size: 4.5vw;
            color: #666666;
            font-weight: bold;
        }
    }
    .box:nth-of-type(1){
        margin-top: 8.5vw;
    }
    .money::before{
        content: "￥"
    }
    img{
        width: 4vw;
    }
    .book::after{
        content: "本"
    }
</style>